<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美卡片悬停效果</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <!-- 卡片1 -->
        <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="card-image"></div>
                    <div class="card-content">
                        <h3 class="card-title">创意设计</h3>
                        <p class="card-description">探索无限创意可能，打造独特视觉体验，让每个设计都成为艺术品。</p>
                    </div>
                </div>
                <div class="card-back">
                    <h3 class="card-back-title">创意设计</h3>
                    <p class="card-back-text">我们的设计团队专注于创造独特而富有表现力的视觉解决方案，帮助您的品牌脱颖而出。</p>
                    <a href="#" class="btn">了解更多</a>
                </div>
            </div>
        </div>
        
        <!-- 卡片2 -->
        <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="card-image"></div>
                    <div class="card-content">
                        <h3 class="card-title">前端开发</h3>
                        <p class="card-description">构建响应式、高性能的现代Web应用，提供流畅的用户体验。</p>
                    </div>
                </div>
                <div class="card-back">
                    <h3 class="card-back-title">前端开发</h3>
                    <p class="card-back-text">我们使用最新的前端技术栈，创建直观、响应迅速的用户界面，确保跨设备兼容性。</p>
                    <a href="#" class="btn">了解更多</a>
                </div>
            </div>
        </div>
        
        <!-- 卡片3 -->
        <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="card-image"></div>
                    <div class="card-content">
                        <h3 class="card-title">用户体验</h3>
                        <p class="card-description">以用户为中心的设计理念，打造直观易用的产品交互体验。</p>
                    </div>
                </div>
                <div class="card-back">
                    <h3 class="card-back-title">用户体验</h3>
                    <p class="card-back-text">我们深入研究用户行为，优化产品流程，确保每个交互都简单、直观且令人愉悦。</p>
                    <a href="#" class="btn">了解更多</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>